<template>
    <div class="bg-white p-[20px] rounded-[4px]">
        <div class="flex justify-between items-center mb-[10px]">
            <span class="font-[16px]">友情链接列表</span>
            <a-button type="primary" @click="addEvent">添加友情链接</a-button>
        </div>
        <div>
            <a-table :columns="columns" :scroll="{ x: 1000 }" :data-source="searchTable.data" :pagination="false"
                :loading="searchTable.loading">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.dataIndex === 'img_url'">
                        <a-image v-if="record.img_url" :height="80" :src="imgUrl(record.img_url)" />
                    </template>
                    <template v-if="column.dataIndex === 'status'">
                        <a-tag color="#87d068" v-if="record.status == 1">显示</a-tag>
                        <a-tag color="orange" v-else>隐藏</a-tag>
                    </template>
                    <template v-if="column.dataIndex === 'action'">
                        <a-button type="link" @click="editEvent(record)">编辑</a-button>
                        <a-button type="link" @click="deleteEvent(record)">删除</a-button>
                    </template>
                </template>
            </a-table>
        </div>
        <edit-friend-link ref="editModal" @complete="initData" />
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { createVNode } from 'vue';
import editFriendLink from './components/edit-friend-link.vue';
import { FriendLinkList, deleteFriendLink } from '@/utils/api/friend_link';
import { imgUrl } from '@/utils/libs/common';

const searchTable = reactive({
    loading: false,
    data: [],
})

const columns = [
    {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '图片',
        dataIndex: 'img_url',
        key: 'img_url',
        responsive: ['lg'],
    },
    {
        title: '链接',
        dataIndex: 'link_url',
        key: 'link_url',
    },
    {
        title: '排序',
        dataIndex: 'sort',
        key: 'sort',
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
    },
    {
        title: '发布时间',
        dataIndex: 'created_at',
        key: 'created_at',
        responsive: ['lg'],
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        fixed: 'right',
        width: 80,
    },
];


onMounted(() => {
    initData();
});

// 初始化数据
const initData = () => {
    searchTable.loading = true;
    FriendLinkList({}).then((res: any) => {
        searchTable.data = res.data;
        searchTable.loading = false;
    }).catch(() => {
        searchTable.loading = false;
    })
};

const editModal: Record<string, any> | null = ref(null);

const addEvent = () => {
    editModal.value.setFormData(null);
    editModal.value.showModal = true;
}

const editEvent = (data: any) => {
    editModal.value.setFormData(data);
    editModal.value.showModal = true;
}

const deleteEvent = (data: any) => {
    Modal.confirm({
        title: '删除友情链接',
        icon: createVNode(ExclamationCircleOutlined),
        content: '确定要删除友情链接吗？删除后将无法恢复！',
        okType: 'danger',
        onOk() {
            console.log('OK');
            deleteFriendLink({ id: data.id }).then((res: any) => {
                message.success(res.message);
                initData();
            })
        },
        onCancel() {
            console.log('Cancel');
        },
    });
}

</script>